<template>
	<view>
		<!-- 自定义标题栏 -->
		<my-navigation-bar :title="title" :btnSrc="btnSrc" :titleIconSrc="titleIconSrc" @btnClick="drawerMenuShow">
		</my-navigation-bar>

		<!-- 侧边抽屉部分 -->
		<uni-drawer ref="drawer" :width="width" @change="getDrawerStatus">
			<view class="drawer_content">

				<scroll-view scroll-y="true" style="height: 100%;">

					<!-- 用户信息区域 -->
					<view class="user_info">
						<!-- 头像栏 -->
						<view class="user_avatar">
							<image :src="convertHttp(avatar)"></image>
						</view>

						<!-- 第二栏 -->
						<view class="username">
							<!-- 账户名称 -->
							<view>{{$getMemoryPmt('userInfo').username || '游客试用'}}</view>
							<!-- 预留的按钮区 -->
							<view class="username_right">

								<!-- 通知按钮 -->
								<!-- <view class="btn_item">
									<image src="@/static/index/index/notification.png"></image>
								</view> -->

								<!-- 设置按钮 -->
								<!-- <view class="btn_item">
									<image src="@/static/index/index/setting.png"></image>
								</view> -->
								
								<!-- 搜索按钮 -->
								<view class="btn_item" @click="goToSearchPage">
									<image src="@/static/index/index/search.png"></image>
								</view>

							</view>
						</view>

					</view>

					<view class="drawer_floor">
						<!-- 标签管理 -->
						<view class="drawer_item" @click="$navigateTo({
							url: '/pages/index/tags_manage/index/index'
						})">
							<image src="@/static/index/index/tag_manager.png"></image>
							<view class="tag_text">标签管理</view>
						</view>
						
						<!-- 标签栏分类查看 -->
						<view class="drawer_item" @click="isCategoryShow = !isCategoryShow">
							<image src="@/static/index/index/tags.png"></image>
							<view class="tag_text">分类查看</view>
						</view>
						
						<!-- 子菜单展开 -->
						<view class="drawer_child_item_list" v-show="isCategoryShow">
							
							<view 
							class="drawer_item drawer_child_item" 
							v-for="(childItem, index) in tagsList"
							@click="menuItemClick(index + menuList.length)"
							:class="{'drawer_item_selected': menuCurIndex === index + menuList.length}">
								<image src="@/static/index/index/tag.png"></image>
								<view class="tag_text">{{childItem.tagName}}</view>
							</view>
							
						</view>

					</view>

					<!-- 扩展功能区域 -->
					<view class="drawer_floor">

						<view class="drawer_item" v-for="(item,index) in menuList" @click="menuItemClick(index)"
							:class="{'drawer_item_selected': menuCurIndex === index}">
							<image :src="item.imgSrc"></image>
							<view class="tag_text">{{item.title}}</view>
						</view>

					</view>

					<!-- 进度统计 -->
					<view class="drawer_item" 
						@click="$navigateTo({
							url: '/pages/index/progress_statistics/index'
						})">
						<image src="@/static/index/index/statistics.png"></image>
						<view class="tag_text">进度统计</view>
					</view>

				</scroll-view>
			</view>
		</uni-drawer>

		<!-- 悬浮按钮 -->
		<view class="add_plan" @click.stop="addNewPlan()" v-if="menuCurIndex === 0 || menuCurIndex === 1">
			<image src="@/static/index/index/add_plan.png"></image>
		</view>
		
		<!-- 进行中 计划展开收起 按钮 -->
		<view class="plan_status" @click="isUnderwayShow = !isUnderwayShow">
			<text>进行中</text>
			<image :src="isUnderwayShow ? require('@/static/index/index/unfold.png') : require('@/static/index/index/fold.png')"></image>
		</view>
		
		<!-- 进行中 计划展示列表 -->
		<view class="plan_item" v-for="item in underwayList" v-show="isUnderwayShow" 
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<view class="plan_tag_list">
				<view class="tag_item" v-for="itemChild in item.tagList" :style="{'background-color': itemChild.color}">
					{{'#' + itemChild.tagName}}
				</view>
			</view>
			
			<view class="plan_ddl">
				<view :style="{color: isPlanExpired(item.deadline) ? '#E24844': '#617FDE'}">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
		
		
		
		<!-- 已完成 计划展开收起 按钮 -->
		<view class="plan_status" @click="isCompleteShow = !isCompleteShow">
			<text>已完成</text>
			<image :src="isCompleteShow ? require('@/static/index/index/unfold.png') : require('@/static/index/index/fold.png')"></image>
		</view>
		
		<!-- 已完成 计划展示列表 -->
		<view class="plan_item plan_complete_status" v-for="item in completeList" v-show="isCompleteShow"
		@click="$navigateTo({
			url: `/pages/index/add_and_update_plan/index?mode=update&duration=${item.duration}&planid=${item.id}`
		})">
			<view class="plan_title">{{item.title}}</view>
			
			<view class="plan_tag_list">
				<view class="tag_item" v-for="itemChild in item.tagList" :style="{'background-color': itemChild.color}">
					{{'#' + itemChild.tagName}}
				</view>
			</view>
			
			<view class="plan_ddl">
				<view style="color: #000000">{{item.deadline}}</view>
				<view class="duration">{{item.duration === 'short' ? '短' : '长'}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import myNavigationBar from '@/components/my-navigation-bar/index.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue';
	import { isPlanExpired } from '@/utils/planDateHandle.js'
	import convertHttp from '@/utils/convertHttp.js'

	export default {
		components: {
			myNavigationBar,
			uniDrawer
		},
		data() {
			return {
				avatar: '',		//用户头像
				// 顶部标题栏参数
				title: '组件标题',
				btnSrc: require('@/static/index/index/list.png'),
				titleIconSrc: require('@/static/index/index/house.png'),
				// 侧边抽屉参数，单位rpx
				width: 610,

				// 菜单栏参数
				menuList: [{
						title: '短期计划',
						imgSrc: require('@/static/index/index/short_plan.png')
					},
					{
						title: '长期计划',
						imgSrc: require('@/static/index/index/long_plan.png')
					},
				],
				menuCurIndex: 0,		// 菜单栏当前索引
				curTagId: '',			// 当前选中的标签分类id
				isCategoryShow: false,	// 标签分类是否折叠
				tagsList: [],
				
				// 计划列表部分开始
				isUnderwayShow: true,		// 进行中列表展示状态
				isCompleteShow: true,		// 已完成列表展示状态
				
				underwayList: [],			// 进行中的计划列表
				
				completeList: [],			// 已完成的计划列表
				
				
				
			};
		},
		onLoad() {
			
			// 首次进入把菜单置为 可扩展菜单的 第0项
			this.menuItemClick(0, false)
			
		},
		onShow() {
			this.getTagList()
			
			this.getUnderwayList()
			this.getCompleteList()
			this.getUserDetail()
		},
		methods: {
			convertHttp,
			// 判断计划是否过期
			isPlanExpired,	
			// 处理获取 计划列表的 请求参数 和 请求地址
			getPlanListParamsURL(isdone) {
				
				let reqParams = { isdone: isdone }
				let reqURL = ""
				
				if(this.menuCurIndex === 0) {
					// 短期计划请求参数
					reqParams.duration = 'short'
					reqParams.userId = this.$getMemoryPmt('userInfo').id
					
					reqURL = "/api/plan/list"
				}
				else if (this.menuCurIndex === 1) {
					// 长期计划请求参数
					reqParams.duration = 'long'
					reqParams.userId = this.$getMemoryPmt('userInfo').id
					
					reqURL = "/api/plan/list"
				}else {
					reqParams.tagId = this.curTagId
					
					reqURL = "/api/tagtoplan/list"
				}
				
				return { reqParams, reqURL }
			},
			// 获取进行中的计划列表
			getUnderwayList() {
				
				let { reqParams, reqURL } = this.getPlanListParamsURL(false)
				
				this.$http_json({
					url: reqURL,
					method: "get",
					loading: false,
					params: {
						...reqParams
					}
				}).then(result => {
					console.log(result)
					// todo
					this.underwayList = result.data
				})
			},
			// 获取已完成的计划列表
			getCompleteList() {
				
				let { reqParams, reqURL } = this.getPlanListParamsURL(true)
				
				this.$http_json({
					url: reqURL,
					method: "get",
					loading: false,
					params: {
						...reqParams
					}
				}).then(result => {
					console.log(result)
					// todo
					this.completeList = result.data
				})
			},
			// 获取标签列表
			getTagList() {
				this.$http_json({
					url: "/api/tag/list",
					method: "get",
					loading: false,
					params: {
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					console.log(result)
					this.tagsList = result.data
					// todo
				})
			},
			
			// 添加新计划（悬浮框点击）
			addNewPlan() {
				if(this.menuCurIndex === 0) {
					// 添加短期计划
					this.$navigateTo({
						url: '/pages/index/add_and_update_plan/index?mode=add&duration=short'
					})
				}
				else if (this.menuCurIndex === 1) {
					// 添加长期计划
					this.$navigateTo({
						url: '/pages/index/add_and_update_plan/index?mode=add&duration=long'
					})
				}
			},
			// 抽屉 一级菜单 子项点击事件
			menuItemClick(index, isReq = true) {
				this.menuCurIndex = index

				// 先判断传入的index是否是一级菜单索引，是的话直接取一级菜单数组数据，如果传入index是二级菜单，则先减去一级菜单长度，在取二级菜单数组数据
				if(index < this.menuList.length) {
					this.title = this.menuList[index].title
					this.titleIconSrc = this.menuList[index].imgSrc
				}else {
					this.title = '#' + this.tagsList[index - this.menuList.length].tagName
					this.curTagId = this.tagsList[index - this.menuList.length].id
					this.titleIconSrc = ''
				}
				
				if(isReq) {
					this.getUnderwayList()
					this.getCompleteList()
				}

				this.$refs.drawer.close()
			},

			// 监听抽屉弹出收起状态的改变
			getDrawerStatus(e) {
				// 控制tabbar的收起和显示
				if (e) {
					uni.hideTabBar({
						animation: true
					})
				} else {
					uni.showTabBar({
						animation: true
					})
				}
			},
			// 侧边抽屉显示
			drawerMenuShow() {
				this.$refs.drawer.open()
			},
			// 获取用户详情
			getUserDetail() {
				return this.$http_json({
					url: "/api/user/detail",
					method: "get",
					loading: false,
					params: {
						userId: this.$getMemoryPmt('userInfo').id
					}
				}).then(result => {
					console.log(result)

					this.avatar = result.data.avatar	
				})
			},
			// 跳转搜索页
			goToSearchPage() {
				this.$refs.drawer.close()
				setTimeout(() => {
					this.$navigateTo({
						url: '/pages/index/search/index'
					})
				}, 600)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	
	.add_plan {
		background-color: #617FDE;
		box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.12142857142857139);
		
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		
		display: flex;
		align-items: center;
		justify-content: center;
		
		image {
			width: 52%;
			height: 52%;
		}
		
		position: fixed;
		bottom: 30rpx;
		right: 30rpx;
		overflow: hidden;
		z-index: 9;
	}
	
	.drawer_content {
		display: flex;
		flex-direction: column;

		height: 100%;

		.user_info {
			padding: 80rpx 20rpx 34rpx 30rpx;

			background-color: #617FDE;

			.user_avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.username {
				margin-top: 10rpx;
				font-size: 36rpx;
				font-weight: 600;
				color: #FFFFFF;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.username_right {
					display: flex;
					align-items: center;

					.btn_item {
						width: 36rpx;
						height: 36rpx;
						margin-left: 36rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.btn_item:first-child {
						margin-left: 0;
					}
				}
			}
		}

		.drawer_item {
			display: flex;
			align-items: center;
			padding: 24rpx 24rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.tag_text {
				font-size: 26rpx;
				margin-left: 38rpx;
			}
		}
		
		.drawer_child_item {
			padding-left: 100rpx;
		}

		.drawer_item_selected {
			background-color: #EFF2FC;
			color: #708BE1;
		}


		.drawer_floor {
			padding-bottom: 10rpx;
			border-bottom: 3rpx solid #F0F0F0;
		}
	}
	
	.plan_status {
		background-color: #E7ECFD;
		color: #71737B;
		font-size: 24rpx;
		// font-weight: 700;
		padding: 14rpx 30rpx;
		
		
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
	
	.plan_item {
		border-bottom: 2rpx solid #F1F1F1;
		padding: 0 30rpx;
		
		.plan_title {
			font-size: 30rpx;
			font-weight: bold;
			padding-top: 19rpx;
		}
		
		.plan_tag_list {
			display: flex;
			flex-wrap: wrap;
			
			.tag_item {
				color: #FFFFFF;
				
				height: 40rpx;
				border-radius: 20rpx;
				
				display: flex;
				align-items: center;
				
				padding: 0 14rpx;
				font-size: 24rpx;
				
				margin: 19rpx 14rpx 0 0;
				
			}
		}
		
		.plan_ddl {
			padding: 14rpx 0;
			color: #617FDE;
			font-size: 24rpx;
			
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.duration {
				background-color: #617FDE;
				color: #FFFFFF;
				font-size: 20rpx;
				font-weight: bold;
				
				width: 34rpx;
				height: 34rpx;
				border-radius: 50%;
				
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	.plan_complete_status {
		opacity: 0.3;
	}
</style>
